<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<title>Insert title here</title>
<style type="text/css">
body { margin: 0; overflow: hidden;}
canvas { width: 100%; height: 100% }
#left-oper{
	background-color: rgb(255,255,255,0.5);
	height: 100%;
	width: 200px;
	position: fixed;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	z-index: 1000;
}
#left-oper li{
	list-style: none;
	padding: 10px 0;
	border-bottom: 1px solid #fff;
}
#left-oper input{
	width: 40px;
}
</style>
</head>
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/three.js"></script>
<script src="js/controls/OrbitControls.js"></script>
<script type="text/javascript" src="js/loaders/DDSLoader.js"></script>
<script type="text/javascript" src="js/loaders/MTLLoader.js"></script>
<script type="text/javascript" src="js/loaders/OBJLoader.js"></script>
<body>

<script>
var scene = new THREE.Scene();
var loader = new THREE.CubeTextureLoader();
loader.setPath( 'imgs/' );
var textureCube = loader.load( [
    'tiankong/right.bmp', 'tiankong/left.bmp',
    'tiankong/top.bmp', 'tiankong/bottom.bmp',
    'tiankong/front.bmp', 'tiankong/back.bmp'
] );

//THREE.PerspectiveCamera
var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );



var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

//添加鼠标控制插件
var controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.enableDamping = true; // an animation loop is required when either damping or auto-rotation are enabled
controls.dampingFactor = 0.25;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 1;




var loader1 = new THREE.TextureLoader();
var texture = loader1.load('imgs/木板.jpg');


/*var textureCube = loader.load( [
    'tiankong/4.bmp', 'tiankong/2.bmp',
    'tiankong/6.bmp', 'tiankong/5.bmp',
    'tiankong/3.bmp', 'tiankong/1.bmp'
] );*/
/*var textureCube = loader.load( [
    'tiankong/2.bmp', 'tiankong/4.bmp',
    'tiankong/6.bmp', 'tiankong/5.bmp',
    'tiankong/1.bmp', 'tiankong/3.bmp'
] );*/

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
//var material = new THREE.MeshBasicMaterial( { color: 0xffffff,envMap: textureCube } );
var material = new THREE.MeshBasicMaterial( {color: 0xffffff,map: texture } );
var cube = new THREE.Mesh( geometry, material );
/*var cube_base = new THREE.Mesh( new THREE.BoxGeometry( 20, 0.1, 20 ), new THREE.MeshBasicMaterial( { color: 0xaaaaaa} ) );
cube_base.position.x = 0;
cube_base.position.z = 0;
cube_base.position.y = -0.6;
scene.add( cube_base );*/

scene.add( cube );

camera.position.z = 5;
camera.position.y = 5;
camera.rotation.x = -45;




var fontModel; 
var font; 
var loader = new THREE.FontLoader(); 
loader.load("fonts/gentilis_regular.typeface.json", function (res) { 
 font = new THREE.TextBufferGeometry("->", { 
 font: res, 
 size: 2, 
 height: 0.1 
 }); 

 font.computeBoundingBox(); // 运行以后设置font的boundingBox属性对象，如果不运行无法获得。 
 //font.computeVertexNormals(); 

 //var material = new THREE.MeshLambertMaterial({color: 0xffffff}); 

 fontModel = new THREE.Mesh(font,material); 

 //设置位置 
 fontModel.position.x = 2; //计算出整个模型的宽度的一半 
 fontModel.position.y = 0; 
 fontModel.position.z = 0; 

 scene.add(fontModel); 
}); 


function animate() {
	//cube.rotation.x += 0.001;
	//cube.rotation.y += 0.001;
	//controls.update();
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
}
animate();


/**
 * 添加控件
 */
function add1(th){
	var x = $(th).parent().find(".x").val();
	var y = $(th).parent().find(".y").val();
	var z = $(th).parent().find(".z").val();
	console.log(x+"="+y+"="+z);
	if(x==null||y==null||z==null){
		alert("坐标不能为空");
		return;
	}
	var cube1 = new THREE.Mesh( new THREE.BoxGeometry( 1,1,1 ), new THREE.MeshBasicMaterial( { color: 0xffffff,map: texture } ) );
	cube1.position.x = parseInt(x);
	cube1.position.y = parseInt(y);
	cube1.position.z = parseInt(z);
	scene.add( cube1 );
}
/**
 * 设置相机
 */
function changecamera(th){
	var px = $(th).parent().find(".px").val();
	var py = $(th).parent().find(".py").val();
	var pz = $(th).parent().find(".pz").val();
	var rx = $(th).parent().find(".rx").val();
	var ry = $(th).parent().find(".ry").val();
	var rz = $(th).parent().find(".rz").val();
	if(px==null||py==null||pz==null){
		alert("坐标不能为空");
		return;
	}
	camera.position.x = parseInt(px);
	camera.position.y = parseInt(py);
	camera.position.z = parseInt(pz);
	camera.rotation.x = parseInt(rx);
	camera.rotation.y = parseInt(ry);
	camera.rotation.z = parseInt(rz);
}
window.onload = function(){
	scene.background = textureCube;
	
}



var onProgress = function ( xhr ) {

	if ( xhr.lengthComputable ) {

		var percentComplete = xhr.loaded / xhr.total * 100;
		console.log( Math.round( percentComplete, 2 ) + '% downloaded' );

	}

};
var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.4 );
scene.add( ambientLight );

var pointLight = new THREE.PointLight( 0xffffff, 0.8 );
camera.add( pointLight );

var onError = function () { };

THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
new THREE.MTLLoader()
	.setPath( 'obj/' )
	.load( 'male02_dds.mtl', function ( materials ) {

		materials.preload();

		new THREE.OBJLoader()
			.setMaterials( materials )
			.setPath( 'obj/' )
			.load( 'male02.obj', function ( object ) {

				object.position.y = - 95;
				scene.add( object );

			}, onProgress, onError );

	} );
/*document.ready(function(){
	scene.background = textureCube;
})*/
</script>
<ul id="left-oper">
	<li class="">
	摄像机位置<br/>x:<input class="px" value="0">,y:<input class="py" value="5">,z:<input class="pz" value="5">,
	<br/>摄像机旋转<br/>x:<input class="rx" value="-45">,y:<input class="ry" value="0">,z:<input class="rz" value="0">,
	<button onclick="changecamera(this)">更改</button>
	</li>
	<li class="">
	添加一个箱子<br/>x:<input class="x">,y:<input class="y">,z:<input class="z">,<button onclick="add1(this)">添加</button>
	</li>
</ul>
</body>
</html>